<template>
	<view class="s-countdown_box" :style="boxstyle">
		<view class="s-countdown_title" :style="titlestyle" v-if="title">{{title}}</view>
		<view class="s-countdown_time" :style="bgstyle">{{times[0]||'00'}}</view>
		<text :style="txtstyle">:</text>
		<view class="s-countdown_time" :style="bgstyle">{{times[1]||'00'}}</view>
		<text :style="txtstyle">:</text>
		<view class="s-countdown_time" :style="bgstyle">{{times[2]||'00'}}</view>
	</view>
</template>

<script>
	export default {
		name:"s-count-down-timeb",
		props: {
			bgColor: { type: String,default: '#f5a84e' },// 时间背景颜色
			txtColor: { type: String,default: '#fff' },// 时间文字颜色
			titleColor: { type: String,default: '#000' },// 左边文字颜色
			title: { type: String,default: '' },// 左边文字内容
			size: { type: String,default: '' },// 时间尺寸大小
			time: { type: Number,default: 0 },// 时间戳
		},
		data() {
			return {
				times:['00','00','00'],
				SetInterval:null,
			}
		},
		created() {
			this.timec();
		},
		computed: {
			boxstyle: function(){
				let style = `"font-size":${this.size =='big'?"40rpx":"28rpx"};
					height:${this.size =='big'?"70rpx":"50rpx"};`
				return style; 
			},
			bgstyle: function(){
				let style = `background:${this.bgColor};color:${this.txtColor};`
				return style; 
			},
			txtstyle: function(){
				let style = `color:${this.bgColor}`
				return style; 
			},
			titlestyle: function(){
				let style = `color:${this.titleColor}`
				return style; 
			}
		},
		methods: {
			CountDownEnd(){
				this.$emit("end", "倒计时已结束")
			},
			timec(){
				let t = this;
				if(t.time <= 0){return}
				t.SetTimeTxt();
				if(t.SetInterval){ clearInterval(t.SetInterval) }
				t.SetInterval = setInterval(()=>{
					t.SetTimeTxt();
				}, 1000);
			},
			SetTimeTxt() {
				let t = this;
				var ts = t.time - (new Date().getTime()); //计算剩余的毫秒数
				if(ts/1000 < 1){
					if(t.SetInterval){
						clearInterval(t.SetInterval);
						t.times = ['00','00','00'];
						t.CountDownEnd();
					}
					return;
				}
			    // var ts = (new Date(2018, 8, 9, 0, 0, 0)) - (new Date()); //计算剩余的毫秒数
			    // var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
			    // var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10); //计算剩余的小时数
			    var hh = parseInt(ts / 1000 / 60 / 60, 10); //计算剩余的小时数
			    var mm = parseInt(ts / 1000 / 60 % 60, 10); //计算剩余的分钟数
			    var ss = parseInt(ts / 1000 % 60, 10); //计算剩余的秒数
			    hh = t.checkTime(hh);
			    mm = t.checkTime(mm);
			    ss = t.checkTime(ss);
				t.times = [hh,mm,ss];
			},
			checkTime(i) {
			    if (i < 10) {
			        i = "0" + i;
			    }
			    return i;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.s-countdown{
		&_box{
			display: inline-flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			text{
				display: block;
				margin: 0 6rpx;
			}
		}
		&_title{
			display: block;
			margin-right: 10rpx;
		}
		&_time{
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			border-radius: 6rpx;
			height: 100%;
		}
	}
</style>
